<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css 2d</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="all">
    <figure class="photo_1">
        <img src="http://sandbox.runjs.cn/uploads/rs/448/gbvz3zbs/005.jpg" />
        <figcaption>
            <h4>photo first translate</h4>
            <p>
                first
            </p>
            <p>
                second
            </p>
            <p>
                third
            </p>
        </figcaption>
    </figure>

    <figure class="photo_2">
        <img src="http://sandbox.runjs.cn/uploads/rs/448/gbvz3zbs/004.jpg" />
        <figcaption class="photo_02">
            <h4>photo first rotate</h4>
            <p>
                first
            </p>
            <div>

            </div>
        </figcaption>
    </figure>
    <figure class="photo_3">
        <img src="http://sandbox.runjs.cn/uploads/rs/448/gbvz3zbs/004.jpg" />
        <figcaption class="photo_03">
            <h4>photo first skew</h4>
            <p>
                first second third forth
            </p>
        </figcaption>
    </figure>
    <figure class="photo_4">
        <img src="http://sandbox.runjs.cn/uploads/rs/448/gbvz3zbs/005.jpg" />
        <figcaption class="photo_04">
            <h4>photo first translate</h4>
            <p>
                first
            </p>
            <div>

            </div>
        </figcaption>
    </figure>
    <figure class="photo_5">
        <img src="http://sandbox.runjs.cn/uploads/rs/448/gbvz3zbs/012.jpg"/>
        <figcaption>
            <h4>
                photo 边角斜插入
            </h4>
            <div>
                <ul>
                    <li>信息1</li>
                    <li>信息2</li>
                    <li>信息3</li>
                </ul>
            </div>
        </figcaption>
    </figure>
    <figure class="photo_6">
        <img src="http://sandbox.runjs.cn/uploads/rs/448/gbvz3zbs/013.jpg"/>
        <figcaption>
            <h4>
                井字格动画
            </h4>
            <p>
                这是一段描述。。。
            </p>
            <div class="one">

            </div>
            <div class="two">

            </div>
        </figcaption>
    </figure>


    <footer>
        <hr>
        <address>
            write by:<a href="http://blog.csdn.net/heroboyluck">heroBo</a><br>
            <p>
                有什么想法，欢迎交流！
            </p>

        </address>
    </footer>
</div>

</body>
</html>